<template>
    <div class="qmkg-header qmkg-product">
        <div class="left" @touchend="$router.push( {path: '/*'} )">
            <!-- <slot name="left"></slot> -->
            
                <img src="/static/img/logo.png" alt="" width="121" height="75">
            
        </div>
        <div class="title">
            <h1 v-if="title">{{title}}</h1>
            <slot v-else></slot>
        </div>
        <div class="right" @touchend="isShow">
            <slot name="right"></slot>
        </div>
        <div class="arrow" v-show='show'>
            <div class="top"></div>
            <div class="bottom">
                <!-- <ul class="nav">
                    <li><span class="first">首页</span></li>
                    <li><span>产品介绍</span></li>
                    <li><span>大赛</span></li>
                    <li><span>个人中心</span></li>
                    <li><span>VIP中心</span></li>
                    <li><span>公会入驻</span></li>
                </ul> -->
                <ul class="nav">
                    <router-link tag="li" :to="item.path" v-for="item in types" :key="item._id">
                        <span>{{item.title}}</span>
                    </router-link>
                </ul>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
//引入样式库
@import '../base.less';
.qmkg-header {
    position: relative;
    background:green;
    color: #fff;
    display: flex;
    height: 50px;
    line-height: 50px;
    text-align: center;
    
    .right {
        width: 60px;
        font-size: 30px;
    }
    .left{
        position: absolute;
        left:20px;
        top: -10px;
        width: 121px;
        height: 75px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .title {
        flex: 1;
    }
}
.arrow {
    // position: absolute;
    position: relative;
    .top {
        top: 40px;
        position: absolute;
        right: 20px;
        width: 0;
        height: 0;
        border: 10px solid red;
        border-bottom-color: white;
        border-top: none;
        border-left-color: transparent;
        border-right-color: transparent;
        z-index: 100;
        }
    .bottom{
        position: absolute;
        top: 48px;
        right: 15px;
        width: 80px;
        height: 220px;
        // border: solid 2px red;
        .nav{
            color: black;
            position: relative;
            text-align: center; 
            z-index: 100; 
            background-color: white;
            &.show {
                display: flex;
            }}
        .nav li{
                font-size: 14px;
                width: 78px;
                height: 40px;
                margin-bottom: 5px;
                line-height: 40px;
                span{
                    display: inline-block;
                    // border-top: solid 1px #e3e3e3;
                    border-top: solid 1px red;
                    width: 60px;
                }
                &:first-of-type span{
                    border-top: solid 0 transparent;
                }
        }
    }         // border-top: solid 1px;
}
    

</style>
<script>
export default {
    //同步数据
    // data() {
    //     return {
    //         types: [
    //             {id:0, title:"首页"},
    //             {id:1, title:"产品介绍页"},
    //             {id:2, title:"大赛页"},
    //             {id:3, title:"个人中心页"},
    //             {id:4, title:"VIP中心页"},
    //             {id:5, title:"公会入驻页"},
    //         ]
    //     }
    // },
    //接收属性
    props: ['title'],
    data() {
        return {
            show: false,
            //同步数据
            types: [
                {id:0, title:"首页", path: '/*'},
                {id:1, title:"产品介绍", path: '/Product'},
                {id:2, title:"大赛", path:'/Game'},
                {id:3, title:"个人中心", path: '/Personage'},
                {id:4, title:"VIP中心", path: '/Vip'},
                {id:5, title:"公会入驻", path: '/Society'},
            ]
        }
    },
    methods: {
        isShow() {
            this.show ? this.show = false : this.show = true;
        }
    }
}
</script>